<template>
  <div class="talent">
      <el-tabs type="card">
            <el-tab-pane label="应聘者信息">
                <div class="filter">
                    <el-input class="w200" v-model="formData.name" placeholder="请输入应聘者姓名"></el-input>
                    <el-button @click="getRows()" type="primary" round size="small">查询</el-button>
                </div>
                <el-table :data="tableData" border style="width: 100%" header-row-class-name="bgd8">
                    <el-table-column prop="jobName" label="应聘岗位" > </el-table-column>
                    <el-table-column prop="name" label="姓名"> </el-table-column>
                    <el-table-column prop="sex" label="性别">
                        <template scope="scope">
                            <span v-if="scope.row.sex == 0">男</span>
                            <span v-if="scope.row.sex == 1">女</span>
                        </template> 
                    </el-table-column>
                    <el-table-column prop="birthday" label="出生日期"> </el-table-column>
                    <el-table-column prop="contactNum" label="联系电话"> </el-table-column>
                    <el-table-column prop="degree" label="文化程度"> 
                        <template scope="scope">
                            <span v-if="scope.row.degree==1">博士后</span>
                            <span v-if="scope.row.degree==2">博士</span>
                            <span v-if="scope.row.degree==3">硕士</span>
                            <span v-if="scope.row.degree==4">本科</span>
                            <span v-if="scope.row.degree==5">专科</span>
                            <span v-if="scope.row.degree==6">高中</span>
                            <span v-if="scope.row.degree==7">高中以下</span>
                        </template>
                    </el-table-column>
                     <el-table-column prop="marriage" label="婚姻状况">
                        <template scope="scope">
                            <span v-if="scope.row.marriage == 0">未婚</span>
                            <span v-if="scope.row.marriage == 1">已婚</span>
                        </template>     
                     </el-table-column>
                    <el-table-column prop="address" label="居住地址" :show-overflow-tooltip="true"> </el-table-column>                                    
                    <el-table-column prop="workInfo" label="从业经历" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="createTime" label="应聘日期"> </el-table-column>
                    <el-table-column prop="status" label="审核状态"> 
                        <template scope="scope">
                            <span v-if="scope.row.status == 0" style="#d3b382">待审核</span>
                            <span v-if="scope.row.status == 1" style="color:#70D36C">有意向</span>
                            <span v-if="scope.row.status == 2">不考虑</span>
                            <span v-if="scope.row.status == 3" style="color:#86d2ff">待定</span>
                        </template> 
                    </el-table-column>
                    <el-table-column label="操作 " width="330px">
                        <template slot-scope="scope">
                            <el-button @click="edit(scope.row,1)" type="success" size="small">有意向</el-button>
                            <el-button @click="edit(scope.row,2)" size="small">不考虑</el-button>
                            <el-button @click="edit(scope.row,3)" type="info" size="small">待定</el-button>
                            <el-button type="danger" size="small"  @click="del(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination background  layout="prev, pager, next" :total="totalCount" @current-change="currentChange" @prev-click="prevClick" @next-click="nextClick"> </el-pagination>
            </el-tab-pane>
            <el-tab-pane label="创业者信息">
                <el-table :data="tableData2" border style="width: 100%" header-row-class-name="bgd8">
                    
                    <el-table-column prop="name" label="姓名"> </el-table-column>
                    <el-table-column prop="contactNumber" label="联系电话"> </el-table-column>
                    <el-table-column prop="city" label="申请区域"> </el-table-column>
                    <el-table-column prop="email" label="电子邮箱"> </el-table-column>                                  
                    <el-table-column prop="workInfo" label="从业经历" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column label="操作 " width="180px">
                        <template slot-scope="scope">
                            <el-button @click="edit2(scope.row)" type="info" size="small">指定区域</el-button>
                            <el-button type="danger" size="small"  @click="del2(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination background  layout="prev, pager, next" :total="totalCount2" @current-change="currentChange" @prev-click="prevClick" @next-click="nextClick"> </el-pagination>
            </el-tab-pane>
            
        </el-tabs>
      
        <el-dialog title="指定区域" class="w750" :visible.sync="dialogTableVisible">
            <el-form  :model="formInline" label-width="280px" class="demo-form-inline">
            <el-form-item label="选择省份：" >  
                    <el-select size="small" v-model="formInline.province"   placeholder="请选择省份"  @change="getCity">  
                        <el-option  v-for="item in provinceData"  :label="item.name" :value="item.id"></el-option>  
                    </el-select>   
                </el-form-item> 
            <el-form-item label="选择城市：" >  
                <el-select size="small" v-model="formInline.city"  placeholder="请选择城市"  >  
                    <el-option v-for="item in citys" :label="item" :value="item"></el-option>  
                </el-select>  
            </el-form-item>  
            </el-form>
            <el-button type="primary" class="w140" size="small" @click="updateRegion" style="margin-left:300px">确认</el-button>
        </el-dialog>
  </div>
</template>

<script>
import cityData from  '../assets/js/data.js'
export default {
  name: 'HelloWorld',
  data () {
    return {
        dialogTableVisible:false,
        formData:{
            name:''
        },
        tableData: [],
        tableData2: [],
        curPage:1,
        totalCount:0,
        totalCount2:0,
        provinceData:[],
        citys:[],
        formInline:{
            province:'',
            city:''
        },
        id2:''
        
    }
  },
  methods:{
      getCity(id){
          console.log(id)
          this.citys=cityData.city[id];
          this.formInline.city='';
      },
      del(data){
          this.$confirm('确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var id =data.id;
          var httpApi=this.$store.state.httpApi;
          this.$http.post(this.$store.state.httpApi + 'jobApplicationInfo/del?id='+id).then(response =>{
            if(response.status == 200){
              this.$message.success('删除成功');
			  this.getRows();
            }else{
              console.log('接口返回失败!',response);
            }
          },response => {          
            console.log('请求失败',response)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      del2(data){
          this.$confirm('确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var id =data.id;
          var httpApi=this.$store.state.httpApi;
          this.$http.post(this.$store.state.httpApi + 'entrepreneurInfo/del?id='+id).then(response =>{
            if(response.status == 200){
              this.$message.success('删除成功');
			  this.getRows2();
            }else{
              console.log('接口返回失败!',response);
            }
          },response => {          
            console.log('请求失败',response)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      edit(data,status){
          this.$confirm('确定要执行此操作吗吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var id =data.id;
          var httpApi=this.$store.state.httpApi;
          this.$http.post(this.$store.state.httpApi + 'jobApplicationInfo/update?id='+id+'&status='+status).then(response =>{
            if(response.status == 200){
              this.$message.success('操作成功');
			  this.getRows();
            }else{
              console.log('接口返回失败!',response);
            }
          },response => {          
            console.log('请求失败',response)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });          
        });
      },
      edit2(data){
         this.formInline.city='';
         this.formInline.province='';
         this.dialogTableVisible=true;
         this.id2  = data.id;
      },
      updateRegion(){
          this.formInline.id = this.id2;
          this.$http.post(this.$store.state.httpApi + ('entrepreneurInfo/update'),this.formInline).then(response =>{
              if(response.status == 200){
                this.$message.success('指定成功');
                  this.dialogTableVisible=false;
                this.getRows2();
              }else{
                console.log('接口返回失败!',response);
              }
              },response => {
                console.log('请求失败',response)
              })
      },
      pulish(){
        this.dialogTableVisible=true;
      },
      currentChange(page){
          this.curPage = page;
          this.getRows();
      },
      //上一页
      prevClick(page){
          this.curPage = page;
          this.getRows();
      },
    //  下一页
      nextClick(page){
          this.curPage = page;
          this.getRows();
      },
      filterTag(){
          console.log(111)
      },
       showImg(data){
        this.dialogTableVisible=true;
      },
      getRows(){
          this.$http.get(this.$store.state.httpApi + 'jobApplicationInfo/page?currentPage='+this.curPage+'&pageNumber='+10+'&name='+this.formData.name).then(response =>{
          if(response.status == 200){
          this.tableData=response.data.data.pp;
          this.totalCount = response.data.data.page.totalPage*10;
          }else{
            console.log('接口返回失败!',response);
          }
          },response => {
            console.log('请求失败',response)
          })
       },
       getRows2(){
          this.$http.get(this.$store.state.httpApi + 'entrepreneurInfo/page?currentPage='+this.curPage+'&pageNumber='+10).then(response =>{
          if(response.status == 200){
          this.tableData2=response.data.data.pp;
          this.totalCount2 = response.data.data.page.totalPage*10;
          }else{
            console.log('接口返回失败!',response);
          }
          },response => {
            console.log('请求失败',response)
          })
       }
  },
  created(){
    this.provinceData=cityData.provinceData;
    this.getRows();
    this.getRows2();
  }
}
</script>
<style>
    .h200 .el-textarea__inner{
        height:200px
    }
    .talent .el-tabs__content{
        overflow:inherit;
    }
    .filter .el-input__inner{
        height:32px;
        border-radius:50px;
        background:#F4F4F4;
    }
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
    .filter{
        float:right;
        margin-top:-60px;
    }
    
    .mr10{
        margin-right:10px;
    }
    .msgform{
        width:570px;
        margin:0 auto;
    }
</style>
